<template>
    <div class="container">
        <div class="top">指标管理</div>
        <div class="table">
          <el-table border :data="tableData"
            :cell-style="{ background: '#123150', borderColor: '#1560AC', color: '#EDEDED' }"
            :row-style="{ background: '#123150', borderColor: '#1560AC', color: '#EDEDED' }"
            :header-cell-style="{ background: '#123150', borderColor: '#1560AC', color: '#EDEDED', fontSize: '14px', }"
            style="color:#EDEDED; border-color: #1560AC;width:100%;">
            <el-table-column prop="itemName" label="指标名称" align="center">
            </el-table-column>
            <el-table-column prop="itemLimit" label="指标范围" align="center" icon="el-icon-search">
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.itemLowerLimit }} - {{ scope.row.itemUpperLimit }}
                  </div>
                </template>
              </el-table-column>
            <el-table-column prop="optTime" label="编辑时间" align="center">
            </el-table-column>
            <el-table-column label="操作" align="center" width="280">
              <template slot-scope="scope">
                <el-button class="btn1" size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 修改 -->
        <div class="dialogBox">
          <el-dialog :title="dialogTitle" :visible.sync="appendDialog" :before-close="cencelSend" width="50%" center>
            <el-form class="zbfw" ref="editArry" :rules="rules" :model="editArry" label-width="100px">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="指标范围最小值:" prop="itemLowerLimit">
                    <el-input v-model="editArry.itemLowerLimit" placeholder="请输入最小值"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="指标范围最大值:" prop="itemUpperLimit">
                    <el-input v-model="editArry.itemUpperLimit" placeholder="请输入最大值"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button class="btn1" @click="cencelSend">取 消</el-button>
              <el-button class="btn2" @click="editZbfw">确 定</el-button>
            </span>
          </el-dialog>
        </div>
      </div>
</template>

<script>
import { getIndexList, getCurrentIndexList, editIndex } from '@/api/cyRobot/zbgl'
export default {
    name:'zbgl',
    data() {
    return {
      //时间选择器
      valueTime: '',
      //修改按钮
      appendDialog: false,
      tableData: [],
      dialogTitle: '修改',
      //存储修改当前行对应的id
      id: '',
      //获取当前行对应数据
      editArry: {
        itemLowerLimit: '',
        itemUpperLimit: ''
      },
      rules: {
        itemLowerLimit: [
          { required: true, message: '请输入最小值', trigger: 'blur' },
        ],
        itemUpperLimit: [
          { required: true, message: '请输入最大值', trigger: 'blur' },
          { validator: this.checkUnique, trigger: 'blur' }
        ],
      }
    };
  },
  mounted() {
    this.zbglList()
  },
  methods: {
    //获取当前行的指标管理列表
    CurrentIndexList() {
      getCurrentIndexList(this.id).then(response => {
        this.editArry = response.data
        this.dialogTitle = '修改' + this.editArry.itemName + '指标范围'
      })
    },
    //获取指标管理列表
    zbglList() {
      getIndexList().then(response => {
        this.tableData = response.rows
      })
    },
    //修改按钮
    handleEdit(index, row) {
      this.appendDialog = true
      this.id = row.id
      this.CurrentIndexList()
    },
    //取消按钮
    cencelSend() {
      this.appendDialog = false
    },
    //修改指标范围====确定按钮触发
    editZbfw() {
      editIndex(this.editArry).then(response => {
        if (response.code === 200) {
          this.$message({
            type: 'success',
            message: '修改成功!'
          });
        }
        // this.$emit('updateList')
        this.zbglList()
      }).catch(error => {
        console.error('Error editing indicator range:', error);
        this.$message.error('修改失败，请重试！');
      });
      this.appendDialog = false
    },
  }
}
</script>

<style lang="scss" scoped>
* {
    padding: 0;
    margin: 0;
  }
  
  .container {
    background-color: #123150;
    height: calc(100vh - 40px);
    width: 100%;
  
    .top {
      width: 100%;
      height: 50px;
      text-align: left;
      line-height: 50px;
      background-color: #123150;
      border: 1px solid #1560AC;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 18px;
      // margin: 0 0 0px 10px;
      //padding-left: 20px;
      border-left: none;
      border-top: none;
    }
  
  
    .table {
      width: 100%;
      margin: 20px 0 0 0;
      padding-left: 5px;
      padding-right: 5px;
  
      //最底下的线条
      ::v-deep .el-table::before,
      .el-table--group::after,
      .el-table--border::after {
        background-color: #1560AC;
      }

      //表体颜色
      ::v-deep .el-table__body-wrapper{
        background-color: #123150;
      }
  
      //多选框
      ::v-deep .el-checkbox__inner {
        background: #123150;
        border-radius: 1px;
        border: 1px solid #1560AC;
      }
  
      .el-table__fit {
        background-color: #123150;
      }
  
      ::v-deep .el-button--default {
        width: 40px;
        height: 20px;
      }
  
      ::v-deep .el-button--danger {
        width: 50px;
        height: 20px;
      }
  
      ::v-deep .el-button--primary {
        width: 40px;
        height: 20px;
      }
  
      .status1Btn1 {
        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: 14px;
      }
  
      .status1Btn2 {
        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: 14px;
        color: #e40106;
      }
  
      .statusBtn1 {
        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: 14px;
      }
  
      .statusBtn2 {
        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: 14px;
        color: #d2a708;
      }
  
      .btn1 {
        width: 80px;
        height: 25px;
        color: #fff;
        background: linear-gradient(0deg, #123150, #1C97B1);
        border-radius: 2px;
        border: 1px solid #1560AC;
      }


  
    }
  
    ::v-deep .el-dialog:not(.is-fullscreen) {
      margin-top: 15vh !important;
    }
  
    .dialogBox {
      .zbfw {
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
  
        :nth-child(1) {
          font-family: Source Han Sans CN;
          font-weight: 500;
          font-size: 14px;
          color: #EDEDED;
          margin-bottom: 5px;
        }
  
        ::v-deep .el-input {
          width: 80% !important;
        }
  
      }
  
      ::v-deep .el-dialog__header {
        background-color: #123150;
        color: #ffff;
      }
  
      ::v-deep .el-dialog__title {
        color: #ffff;
      }
  
      ::v-deep .el-dialog__body {
        background-color: #123150;
      }
  
      ::v-deep .el-dialog__footer {
        background-color: #123150;
      }
  
      ::v-deep .el-input__inner {
        background-color: #123150;
        color: #EDEDED;
      }
  
      ::v-deep .el-form-item__label {
        color: #EDEDED;
      }
  
      ::v-deep .el-form-item__label {
        width: 128px !important;
      }
  
      ::v-deep .el-input__inner {
        margin-bottom: 18px;
      }
  
      ::v-deep .el-input__inner {
        border-color: #1560AC;
      }
  
      .dialog-footer {
        display: flex;
        justify-content: center;
  
        .btn1 {
          width: 80px;
          height: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
          border: 1px solid #F0F0F0;
          border-radius: 5px;
          margin-right: 10%;
        }
  
        .btn2 {
          width: 80px;
          height: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
          border: 1px solid #F0F0F0;
          border-radius: 5px;
        }
  
        ::v-deep .el-button--default {
          background-color: #123150;
        }
  
        ::v-deep .el-button--default:hover {
          background-color: #F0F0F0;
        }
  
        ::v-deep .el-button--default {
          color: #E1E2E5;
        }
  
        ::v-deep .el-button--default:hover {
          color: #142150;
        }
      }
    }
  }
</style>